<template>
  <table class="my-table" border="1">
    <tr>
      <th>姓名</th>
      <th>联系方式</th>
      <th>办公电话</th>
      <th>备注</th>
    </tr>
    <tr v-for="item in list" :key="item.userId">
      <td style="width: 100px">
        {{ item.userName }}
      </td>
      <td style="width: 100px">
        {{ item.phone }}
      </td>
      <td style="width: 100px">{{ item.officePhone }}</td>
      <td>
        <div class="table-cell">{{ item.remark }}</div>
      </td>
    </tr>
  </table>
</template>

<script>
export default {
  name: "DetailInfo",
  props: {
    list: {
      type: Array,
      default: () => [],
    },
  },
};
</script>

<style>
.my-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #dfe6ec;
}

th,
td {
  text-align: center;
  color: #515a6e;
  padding: 0px 4px;
}

.table-cell {
  width: 260px;
  margin: 0px auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>